<template>
	<div class="best-wrap">
		<!-- 顶部通栏 -->
		<div class="top-bar">
			<div class="layout">
				<div class="title">{{ pageType === 'edit'? '补充试题信息' : '导入试题预览' }}</div>
				<div class="close-button" @click="closePage">关闭</div>
			</div>
		</div>
		<!-- 试题类型导航 -->
		<div class="layout">
			<type-nav :data="questionAllList" :active-type="activeType" @click-item="clickNavType" />
		</div>
		<!-- 内容区域 -->
		<div class="content-wrap layout">
			<!-- 题目详情 -->
			<div v-loading="isLoading" class="left-detail">
				<div id="question-scroll-box" class="question-box" @scroll="computeActiveType">
					<div v-for="(item, index) in questionShowList" :key="item.parentNavId" :id="'q-' + item.navId">
						<div
							v-if="index === 0 || item.questionType !== questionShowList[index-1].questionType"
							class="type-title"
							ref="questionTypeTitle"
							:data-type="item.questionType"
						>
							{{ getQuestionTypeSeq(item.questionType) }}、{{ Dictionary.get('rc_questionType')[item.questionType] }}
						</div>
						<question-show
							class="question-show"
							:class="{'not-border':index === 0 || item.questionType !== questionShowList[index-1].questionType}"
							:data="item"
						>
							<!-- 试题序号插槽 -->
							<template #seq="{ type, childrenIndex }">
								<div
									v-if="type === 'children'"
									class="question-seq"
								>
									{{ item.navSeq }}{{ '.' + (childrenIndex + 1) }}
								</div>
								<div v-else class="question-seq">{{ item.navSeq }}、</div>
							</template>
							<!-- 父题与子题之间的插槽 -->
							<template #parent-bottom>
								<div v-if="pageType === 'edit'" class="edit-box">
									<el-button
										class="save-btn"
										type="text"
										@click="clickEdit(item,['A', 'CF', 'L', 'C'].includes(item.questionType) ? 'parent' : 'normal')"
									>
										补充试题信息
									</el-button>
									<!-- 大题的基础信息,复合题父级题目不能编辑基础信息 -->
									<base-show
										v-if="!['A', 'CF', 'L', 'C'].includes(item.questionType)"
										class="base-items"
										:chapter-list="item.questionChapterResponseVoList"
										:knowledge-list="item.questionKnowledgeResponseVoList"
										:developer-name="item.questionDeveloperName"
									/>
									<!-- 大题的标签信息,复合题题干只能选择'试题年份', '所属地区', '试题分类', '适用范围' -->
									<tag-show
										:year="item.applicableYear"
										:area-list="item.areaRelationListResponseVoList"
										:label-list="item.labelList"
										:type="['A', 'CF', 'L', 'C'].includes(item.questionType) ? 'parent' : 'normal'"
									/>
								</div>
							</template>
							<!-- 每道子题上面的插槽 -->
							<template #children-top="{ childrenItem }">
								<div :id="'q-' + childrenItem.navId" />
							</template>
							<!-- 每道子题底部的插槽 -->
							<template #children-bottom="{ childrenItem }">
								<div v-if="pageType === 'edit'" class="edit-box">
									<el-button class="save-btn" type="text" @click="clickEdit(childrenItem, 'child')">补充试题信息</el-button>
									<!-- 小题的基础信息 -->
									<base-show
										class="base-items"
										:chapter-list="childrenItem.questionChapterResponseVoList"
										:knowledge-list="childrenItem.questionKnowledgeResponseVoList"
										:developer-name="childrenItem.questionDeveloperName"
									/>
									<!-- 小题的标签信息,小题的'试题年份', '所属地区', '试题分类', '适用范围'不能修改，只做展示，跟随大题同步修改 -->
									<tag-show
										:year="childrenItem.applicableYear"
										:area-list="childrenItem.areaRelationListResponseVoList"
										:label-list="childrenItem.labelList"
										type="child"
									/>
								</div>
							</template>
						</question-show>
					</div>
				</div>
				<ve-pagination
					class="question-pagination"
					:page-size-options="[1,5,10,20,50]"
					:get-page="changePage"
					:page.sync="page"
				/>
			</div>
			<!-- 题目导航 -->
			<div class="right-nav">
				<question-nav :type="pageType" :data="questionNavList" @click-item="clickNavNumber" />
			</div>
		</div>
		<!-- 标签信息编辑弹窗 -->
		<edit-dialog
			:visibly.sync="isShowEditDialog"
			:edit-question-type="editQuestionType"
			:subject-id="subjectId"
			:subject-name="subjectName"
			:project-name="projectName"
			:default-data="editQuestionObject"
			@success="editSuccess"
		/>
	</div>
</template>

<script src="./index.mjs"></script>
<style lang="less" scoped src="./index.less"></style>
